<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>日程管理</title>
<link href="${ctx}/static/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/fullcalendar/fancybox.css" rel="stylesheet" type="text/css" />
<link rel='stylesheet' href='${ctx}/static/fullcalendar/lib/cupertino/jquery-ui.min.css' />
<link href='${ctx}/static/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<style type="text/css">
#calendar {
	width: 800px;
	float: left;
	margin: 10px 10px
}

.fancy {
	width: 450px;
	height: auto
}

.fancy h3 {
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid #d3d3d3;
	font-size: 14px
}

.fancy form {
	padding: 10px
}

.fancy p {
	height: 28px;
	line-height: 28px;
	padding: 4px;
	color: #999
}

.input {
	height: 20px;
	line-height: 20px;
	padding: 2px;
	border: 1px solid #d3d3d3;
	width: 100px
}

.btn {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 5px 12px;
	cursor: pointer
}

.btn_ok {
	background: #360;
	border: 1px solid #390;
	color: #fff
}

.btn_cancel {
	background: #f0f0f0;
	border: 1px solid #d3d3d3;
	color: #666
}

.btn_del {
	background: #f90;
	border: 1px solid #f80;
	color: #fff
}

.sub_btn {
	height: 32px;
	line-height: 32px;
	padding-top: 6px;
	border-top: 1px solid #f0f0f0;
	text-align: right;
	position: relative
}

.sub_btn .del {
	position: absolute;
	left: 2px
}

#external-events {
	float: left;
	width: 150px;
	padding: 0 10px;
	border: 1px solid #ccc;
	/* background: #eee; */
	text-align: left;
	margin: 10px 10px;
}

#external-events h4 {
	font-size: 16px;
	margin-top: 0;
	padding-top: 1em;
}

.external-event { /* try to mimick the look of a real event */
	margin: 10px 0;
	padding: 2px 4px;
	background: #0000ff;
	/*color: #fff; */
	font-size: .85em;
	cursor: pointer;
}

#external-events p {
	margin: 1.5em 0;
	font-size: 11px;
	color: #666;
}

#external-events p input {
	margin: 0;
	vertical-align: middle;
}
/* Text colors  #0073b7*/
.text-red {
	color: #f56954 !important;
}

.text-yellow {
	color: #f39c12 !important;
}

.text-aqua {
	color: #00c0ef !important;
}

.text-blue {
	color: #3366CC !important;
}

.text-light-blue {
	color: #3366CC !important;
}

.text-green {
	color: #00a65a !important;
}

.text-navy {
	color: #001f3f !important;
}

.text-teal {
	color: #39cccc !important;
}

.text-olive {
	color: #3d9970 !important;
}

.text-lime {
	color: #01ff70 !important;
}

.text-orange {
	color: #ff851b !important;
}

.text-fuchsia {
	color: #f012be !important;
}

.text-purple {
	color: #932ab6 !important;
}

.text-maroon {
	color: #85144b !important;
}
</style>
<script src="${ctx}/jeasyui-extensions/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="${ctx}/jeasyui-extensions/jquery.jdirk.js" type="text/javascript"></script>
<script src="${ctx}/static/fullcalendar/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="${ctx}/static/fullcalendar/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script src='${ctx}/static/fullcalendar/lib/moment.min.js' type="text/javascript"></script>
<script src='${ctx}/static/fullcalendar/fullcalendar.js' type="text/javascript"></script>
<script src='${ctx}/static/fullcalendar/zh-cn.js' type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		/* initialize the external events
		-----------------------------------------------------------------*/
		function ini_events(ele) {
			$('#external-events div.external-event').each(function() {
				// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
				// it doesn't need to have a start or end
				var eventObject = {
					title : $.trim($(this).text()),
					color : $.trim($(this).attr("title")),
					typeId : $.trim($(this).attr("id"))
				// use the element's text as the event title
				};
				// store the Event Object in the DOM element so we can get to it later
				$(this).data('eventObject', eventObject);
				// make the event draggable using jQuery UI
				$(this).draggable({
					zIndex : 999,
					revert : true, // will cause the event to go back to its
					revertDuration : 0
				//  original position after the drag
				});
			});
		}
		$('#calendar').fullCalendar({
			theme : true,
			header : {
				left : 'prev,next today',
				center : 'title',
				right : 'month,agendaWeek,agendaDay'
			},
			editable : true,
			droppable : true, //允许将事件放在日历上
			eventLimit : true, // allow "more" link when too many events
			dragOpacity : {//设置拖动时事件的透明度 
				agenda : .5,
				'' : .6
			},
			eventDrop : function(event, delta, revertFunc, jsEvent, ui, view) {//拖动事件 
				$.post("${ctx}/basic/calendar/dragDrop", {
					id : event.id,
					daydiff : delta._days,
					minudiff : delta._milliseconds / 60000,
					allday : event.allDay
				}, function(data) {
					if (!data.success) {
						revertFunc(); //恢复原状 
					}
				}, "json");
			},
			eventResize : function(event, delta, revertFunc, jsEvent, ui, view) {
				$.post("${ctx}/basic/calendar/resize", {
					id : event.id,
					daydiff : delta._days,
					minudiff : delta._milliseconds / 60000
				}, function(msg) {
					if (!msg.success) {
						alert(msg);
						revertFunc();
					}
				}, "json");
			},
			drop : function(date, allDay) { // this function is called when something is dropped

				// 检索了元素的存储事件对象
				var originalEventObject = $(this).data('eventObject');
				// we need to copy it, so that multiple events don't have a reference to the same object
				var copiedEventObject = $.extend({}, originalEventObject);

				// assign it the date that was reported
				copiedEventObject.start = date;
				copiedEventObject.allDay = allDay;
				// render the event on the calendar
				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
				var start = $.date.format(copiedEventObject.start, 'yyyy-MM-dd 00:00');
				/*$.fancybox({
						'type' : 'ajax',
						'href' : '${ctx}/basic/calendar/create?start=' + start + '&title=' + copiedEventObject.title
								+ '&backgroundColor=' + copiedEventObject.backgroundColor
					});*/

				// is the "remove after drop" checkbox checked?
				if ($('#drop-remove').is(':checked')) {
					// if so, remove the element from the "Draggable Events" list
					$(this).remove();
					var tid = $(this).attr("id");
					$.post("${ctx}/basic/calendarType/delete/" + tid + "/", function(data) {
						if (data.success) {
							$('div.external-event').remove();
							readevents();
						}
						alert(data.msg);
					}, "json");
				} else {
					var end = $.date.format(copiedEventObject.start, 'yyyy-MM-dd 23:59');
					$.get("${ctx}/basic/calendar/newCalendar", {
						end : end,
						start : start,
						title : copiedEventObject.title,
						backgroundColor : copiedEventObject.color,
						calendarType : copiedEventObject.typeId
					}, function(data) {
						if (data.success) {
							$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
						}
					}, "json");
				}

			},
			selectable : true, //允许用户拖动日期
			select : function(startDate, endDate, allDay, jsEvent, view) {//拖动
				var start = $.date.format(startDate, 'yyyy-MM-dd HH:mm');
				var end = $.date.format(endDate, 'yyyy-MM-dd HH:mm');
				$.fancybox({
					'type' : 'ajax',
					'href' : '${ctx}/basic/calendar/create?start=' + start + '&end=' + end
				});
			}, 
			events : "${ctx}/basic/calendar/json",
			dayClick : function(date, allDay, jsEvent, view) {
				var start = $.date.format(date, 'yyyy-MM-dd 00:00');
				var end = $.date.format(date, 'yyyy-MM-dd 23:59');
				$.fancybox({
					'type' : 'ajax',
					'href' : '${ctx}/basic/calendar/create?start=' + start + '&end=' + end
				});
			},
			eventClick : function(calEvent, jsEvent, view) {
				$.fancybox({
					'type' : 'ajax',
					'href' : '${ctx}/basic/calendar/create?id=' + calEvent.id
				});
			}
		});
		//读取事件
		function readevents() {
			$.post("${ctx}/basic/calendarType/reque", function(data) {
				if (data.success) {
					var cty = new Array();
					cty = data.obj;
					if (cty.length) {
						for (var i = 0; i < cty.length; i++) {
							var event = $("<div />");
							event.css({
								"background-color" : cty[i].backgroundColor
							}).addClass("external-event");
							event.html(cty[i].typeName);
							event.attr('id', cty[i].id);
							event.attr('title', cty[i].backgroundColor);
							$('#external-events').prepend(event);
							ini_events(event);
						}
					}
				}
			}, "json");

		}
		readevents();
		//添加拖动事件
		$("#add-new-event").click(function(e) {
			e.preventDefault();
			var val = $("#new-event").val();
			var value = $("#colorpicker").val();
			if (val.length == 0) {
				alert("日程事件标题不能为空");
				return;
			}
			$("#new-event").val("");
			$.post("${ctx}/basic/calendarType/update", {
				id : "",
				backgroundColor : value,
				typeName : val
			}, function(data) {
				if (data.success) {
					$('div.external-event').remove();
					readevents();
				}
				alert(data.msg);
			}, "json");
		});
	});
</script>
</head>

<body>
	<div data-options="region:'center',fit:true,border:false">
		<div id='external-events'>
			<p>
				<input type='checkbox' id='drop-remove' /> <label for='drop-remove'>勾选移除日程类型</label>
			</p>
			<form id="fm" method="post">
				<input id="id" name="id" type="hidden" />
				
					<label>日程类型：</label>
					<input id="new-event" name="typeName" type="text" class="easyui-validatebox" placeholder="添加事件标题" style="width: 150px">
					<label>类型颜色:</label>
					<input id="colorpicker" type='color' style="width: 150px" value="#00a65a" />
				
			</form>
			<div>
				<input id="add-new-event" type="submit" class="btn btn_ok" value="新增日程类型">
			</div>
		</div>

		<div id="calendar"></div>
		<div style='clear: both'></div>

	</div>
</body>
</html>

